<template>
  <div>
    <h1>分类标签管理</h1>

    <!--饼图-->
    <div>
      <blogCountByLabel></blogCountByLabel>
    </div>

    <el-form ref="form" :model="form" label-width="120px" class="input">
      <el-form-item label="新增文章分类" required="true">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">增添</el-button>
      </el-form-item>
    </el-form>


    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          label="日期"
          width="220">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.created }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="标签名"
          width="180">
        <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.mid)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>

</template>

<script>
import blogCountByLabel from "../charts/blogCountByLabel";

export default {
  inject: ["reload"],
  name: "labelManage",
  components: {blogCountByLabel},
  data() {
    return {
      form: {
        name: ''
      },
      tableData: [],
    }
  },
  methods: {
    onSubmit() {
      //增加分类
      this.$axios.post("/addMeta", this.form).then(res => {

        this.$message({
          type: "success",
          message: "增加成功"
        })
        this.reload();
      })
    },
    handleDelete(mid) {
      this.$axios.delete("/delMeta?mid="+mid).then(res=>{
        this.$message({
          type: "success",
          message: "删除成功"
        })
      })

      this.reload();
    }
  },

  created() {
    this.$axios.get("/getRawMetas").then(res=>{
      this.tableData = res.data.data
    })
  }
}
</script>

<style scoped>
.input {
  width: 400px;
  text-align: left;
}
</style>